<template>
  <div class="order">
    <van-nav-bar title="订单结算" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="box">
      <!-- 地址选择 -->
      <div class="addressBox" v-for="(item,index) in addressList" :key="index" :class="index==chosenAddressId?'block':'none'">
        <div v-if="index==chosenAddressId">
        <van-cell  @click="clickPop()">选择地址  <van-icon name="arrow" /></van-cell>
        <div class="first"  @click="clickPop()">
          <div class="user_name">{{ item.name }}</div>
          <div class="phone">{{item.tel}}</div>
          <div class="default" v-if="item.isDefault==1">默认</div>
        </div>
        <div class="second"  @click="clickPop()">{{item.addressDetail}}</div>
        </div>
        <van-popup
          v-model="show"
          position="bottom"
          closeable
          onclick="event.cancelBubble = true"
          @click-close-icon="clickCloseIcon()"
          @close="closePop()"
          close-on-click-overlay
          :style="{ height: '40%' }"
        >
              <!-- 地址选择 -->
      <div class="addressBox" >
        选择地址
        <van-radio-group v-model="radio">
          <van-radio v-for="(item,index) in addressList" :key="index" :name="index">    
                <div class="first">
          <div class="user_name">{{item.name}}</div>
          <div class="phone">{{item.tel}}</div>
          <div class="default" v-if="item.isDefault==1">默认</div>
        </div>
        <div class="second">{{item.addressDetail}}</div></van-radio>
        </van-radio-group>
      </div>
          <!-- <van-address-list class="" v-model="chosenAddressId" :list="addressList" default-tag-text="默认" /> -->
          <!-- @add="onAdd"
          @edit="onEdit"-->
        </van-popup>
      </div>
      <!-- 订单信息 -->
      <div class="orderInfo">
        订单信息
        <!-- 商品详情 -->
        <div class="product-item" v-for="(item,index) in productData" :key="index">
          <van-swipe-cell>
            <div class="product-box">
              <div class="img-box">
                <img :src="item.small_img" />
              </div>
              <div class="context">
                <div class="head">
                  <div class="name">{{ item.name }}</div>
                  <div class="rule">{{ item.rule }}</div>
                </div>
                <div class="enname">{{ item.enname }}</div>
                <div class="tail">
                  <div class="price">￥{{ item.price }}</div>
                  <div class="count">x{{item.count}}</div>
                </div>
              </div>
            </div>
          </van-swipe-cell>
        </div>
      </div>
      <div class="divider"></div>
      <!-- 其他信息 -->
      <div class="other">
        <div class="time">{{this.time | formatDate(('yyyy-MM-dd h:m:s'))}}</div>
        <div class="flex">
          <div>共计 {{ count }} 件</div>
          <div>合计 ￥{{ totalPrice }}</div>
        </div>
      </div>
    </div>
    <div class="button">立即结算</div>
  </div>
</template>
<script>
export default {
  name: "Order",
  data() {
    return {
      productData: [],
      sids: "",
      time: "",
      count: "",
      totalPrice: "",
      show: false,
      addressList: [],
      chosenAddressId: 0,
      radio:0
    };
  },
  //生命周期
  created() {
    this.sids = this.$route.query.id;
    this.time = new Date();
    this.orderQuery();
    this.addressQuery();
  },
  methods: {
    orderQuery() {
      this.axios({
        //请求类型
        method: "GET",
        //请求地址
        url: "/commitShopcart",
        params: {
          appkey: this.appkey,
          tokenString: localStorage.getItem("tk__"),
          sids: this.sids
        }
      }).then(res => {
        this.productData = res.data.result;
        this.calculate();
      });
    },
    addressQuery() {
      this.axios({
        //请求类型
        method: "GET",
        //请求地址
        url: "/findAddress",
        params: {
          appkey: this.appkey,
          tokenString: localStorage.getItem("tk__")
        }
      }).then(res => {
       this.addressList = res.data.result;
       for(let i =0;i<this.addressList.length;i++){
        if(this.addressList[i].isDefault==1){
          this.chosenAddressId=i;
          this.radio = this.chosenAddressId;
        }
        }
        console.log(this.chosenAddressId);
        // console.log(this.addressList[this.chosenAddressId].name);
      });
    },
    onClickLeft() {
      this.$router.back();
    },
    //计算总价和件数
    calculate() {
      let count = 0;
      let price = 0;
      let totalcount = 0;
      let totalAccount = 0;
      for (const index in this.productData) {
        count = this.productData[index].count;
        price = this.productData[index].price * count;
        totalcount += count;
        totalAccount += price;
      }
      this.count = totalcount;
      this.totalPrice = totalAccount;
    },
    clickPop() {
      this.show =true;
      console.log("弹出层");
    },
    clickCloseIcon() {
      this.show = false;
      console.log("关闭图标");
    },
    closePop(){
      this.chosenAddressId = this.radio;
    }
  }
};
</script>
<style lang="less" scoped>
.order {
  position: relative;
}
.box {
  width: 96%;
  margin: 10px auto;
}
.addressBox {
  background: white;
  font-size: 15px;
  color: gray;
  margin: 10px 0;
  padding: 10px;
  border-radius: 10px 10px 0 0;
}
.first {
  display: flex;
  margin: 10px 0;
}
.user_name {
  color: #0c34ba;
  font-weight: bolder;
  font-size: 15px;
}
.phone {
  font-size: 15px;
  line-height: 23px;
  margin: 0 20px;
}
.default {
  width: 1.2rem;
  text-align: center;
  background: #0c34ba;
  color: white;
}
.orderInfo {
  background: white;
  padding: 10px;
  border-radius: 15px;
  font-size: 15px;
}
.product-item {
  display: flex;
  align-items: center;
  position: relative;
  margin: 10px 0px;
  background-color: white;
  overflow: hidden;
}
.img-box {
  width: 80px;
  height: 80px;
  align-items: center;
}
.product-box {
  display: flex;
}
.img-box img {
  height: 80px;
}
.context {
  margin: 0 5px;
  size: 15px;
  width: 230px;
}
.head,
.tail {
  display: flex;
  position: relative;
}
.name {
  font-size: 13px;
}
.enname {
  margin: 13px 0;
  font-size: 10px;
  color: gray;
}
.price {
  color: #0c34ba;
  font-weight: bolder;
  font-size: 15px;
}
.rule {
  color: gray;
  font-size: 13px;
  margin-left: 10px;
}
.count {
  position: absolute;
  right: 0px;
  font-size: 15px;
  color: gray;
}
.other {
  background: white;
  border-radius: 15px;
  padding: 10px;
  font-size: 14px;
}
.flex {
  display: flex;
}
.time {
  padding-bottom: 10px;
  color: gray;
}
.flex :nth-child(1) {
  color: gray;
  flex: 1;
}
.flex :nth-child(2) {
  color: #0c34ba;
  font-weight: bold;
}
.divider {
  border: 0.5px dashed gray;
  background: white;
  width: 94%;
  margin: 0 auto;
}
.button {
  margin: 10px auto;
  width: 90%;
  background: #0c34ba;
  height: 40px;
  color: white;
  text-align: center;
  line-height: 40px;
  font-size: 13px;
  border-radius: 20px;
  position: fixed;
  bottom: 10px;
  left: 15px;
}
.default{
  border-radius: 10px;
}
.block{
  display: block;
}
.none{
  display: none;
}
/deep/.van-cell{
  padding: 0px;
}
</style>